import React, {useEffect, useState} from 'react'
import {View, Text} from '@tarojs/components'
import Taro, {navigateTo} from "@tarojs/taro"
import {AtAvatar, AtIcon, AtGrid} from 'taro-ui'
import userStore from "../../store/userStore";
import subjectStore from "../../store/subjectStore";
import {getEnv} from "../../env";
import {PaperPo} from '../../types';


import './index.scss'


export default () => {
  const {useStore} = userStore
  const {useStore: useSubjectStore} = subjectStore
  const userInfo = useStore(state => state.value)
  const subjectInfo = useSubjectStore(state => state.current)
  const [everyDayPaper, setEveryDayPaper] = useState<PaperPo | null>(null)
  const [punchClockNumber, setPunchClockNumber] = useState(0);

  useEffect(() => {
    // 初始化学科数据
    Taro.request({
      url: `${getEnv().baseUrl}/subject/all`,
      method: "GET"
    }).then(result => {
      subjectStore.dispatch("setAll", result.data)
      subjectStore.getState(state => {
        if (!state.current) {
          const current = state.all[0].children[0].children[0];
          subjectStore.dispatch("setCurrent", current)
        }
      })
    })
  }, [])

  // 每日一练数据
  useEffect(() => {
    if (!subjectInfo || !subjectInfo.id ) return;
    // 初始化学科数据
    Taro.request({
      url: `${getEnv().baseUrl}/paper/everyDayPaper/${subjectInfo.id}`,
      method: "GET"
    }).then(result => {
      setEveryDayPaper(result.data)
    })
  }, [subjectInfo])

  // 每日一练打卡数据
  useEffect(() => {
    if (!everyDayPaper || !everyDayPaper.id) return
    // 初始化学科数据
    Taro.request({
      url: `${getEnv().baseUrl}/paper/punchClock/${everyDayPaper?.id}`,
      method: "GET"
    }).then(result => {
      setPunchClockNumber(result.data)
    })
  }, [everyDayPaper])


  return <View className='wing-blank'>
    {/*头部*/}
    <View className='at-row at-row__justify--between at-row__align--center'>
      <View className='at-col-6 title-left'>
        {
          userInfo?.isLogin ? <AtAvatar image={userInfo.avatarUrl} circle />
            : <AtAvatar text='空' circle />
        }
        <Text style={{marginLeft: "16px"}}
          onClick={() => Taro.navigateTo({url: "/pages/login/index"})}
        >{userInfo?.isLogin ? userInfo.nickName : "登录/注册"}</Text>
      </View>
      <View className='at-col-4' style={{textAlign: "right"}} onClick={() => Taro.navigateTo({
        url: "/pages/subject/index"
      })}
      >
        {/*学科*/}
        <Text style={{marginRight: "6px"}}>{subjectInfo?.subjectName}</Text>
        <AtIcon value='menu' size='20' color='#6C6C6C' />
      </View>
    </View>
    {/* 每日一练 */}
    {
      everyDayPaper ?
        <View className='at-row' style={{marginTop: "24px"}} onClick={() => Taro.navigateTo({
          url: `/pages/testPaperContent/index?paperId=${everyDayPaper?.id}`
        })}
        >
          <View className='at-col' style={{paddingRight: "5px"}}>
            <View className='card'>
              <View className='card-title'><Text>每日一练</Text></View>
              {
                punchClockNumber?<View className='card-subtitle'><Text>{punchClockNumber}人已打卡</Text></View>:null
              }
              {/*<View className='at-row card-bottom'>*/}
              {/*  <View className='at-col'>*/}
              {/*    <View>*/}
              {/*      <Text className='card-bottom-top-title'>0</Text><Text>天</Text>*/}
              {/*    </View>*/}
              {/*    <View className='cart-bottom-bottom'>*/}
              {/*      <Text>累计打卡</Text>*/}
              {/*    </View>*/}
              {/*  </View>*/}
              {/*  <View className='at-col' />*/}
              {/*</View>*/}
              <View className='card-bg'>
                <AtIcon value='repeat-play' size='50' />
              </View>
            </View>
          </View>
          {/*<View className="at-col" style={{paddingLeft: "5px"}}>*/}
          {/*  <Card></Card>*/}
          {/*</View>*/}
        </View> : null
    }
    {/* gird */}
    <View style={{marginTop: "24px"}}>
      <AtGrid onClick={(item) => {
        if (item.onPress) item.onPress()
      }} data={
        [
          {
            image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
            value: '历年真题',
            onPress: () => navigateTo({url: "/pages/testPaperList/index?paperTypeId=1"})
          },
          {
            image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
            value: '模拟试题',
            onPress: () => navigateTo({url: "/pages/testPaperList/index?paperTypeId=2"})
          },
          // {
          //   image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
          //   value: '收藏夹'
          // },
          {
            image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
            value: '做题记录',
            onPress: () => navigateTo({url: "/pages/testPaperRecord/index"})
          },
        ]
      }
      />
    </View>

  </View>
}

